<template>
    <div class="search-popup">
        <!-- 搜索框 -->
        <van-search
            v-model="searchVal"
            show-action
            :placeholder="placeholder"
            @search="onSearch"
            @cancel="onCancel"
            @input="onInput"
        />

        <!-- 搜索切换组件  3选1 -->
        <HistoryHot
            v-if="blockShow == 1"
            :historyKeywordList="historyKeywordList"
            :hotKeywordList="hotKeywordList"
            @tagClick="tagClick"
        />
        <SearchTipsList
            v-else-if="blockShow == 2"
            :searchTipsListData="searchTipsListData"
            @tagClick="tagClick"
        />
        <SearchProductList
            v-else-if="blockShow == 3"
            :searchProductListData="searchProductListData"
            :filterCategory="filterCategory"
            @categoryChange="categoryChange"
            @priceChange="priceChange"
        />
    </div>
</template>

<script>
import { mapMutations } from "vuex";
//引入组件
import HistoryHot from "../components/search/HistoryHot.vue";
import SearchTipsList from "../components/search/SearchTipsList.vue";
import SearchProductList from "../components/search/SearchProductList.vue";

import {
    getHistoryDataAPI,
    getSearchTipsDataAPI,
    getSearchProductsDataAPI,
} from "../requset/api";
export default {
    components: {
        HistoryHot,
        SearchTipsList,
        SearchProductList,
    },
    data() {
        return {
            searchVal: "",
            // 1 历史记录热门
            // 2 搜索提示列表
            // 3 搜索产品列表
            blockShow: 1, //用于控制搜索页展示组件
            placeholder: "",
            historyKeywordList: [],
            hotKeywordList: [],
            searchTipsListData: [],
            //搜索产品页数据
            searchProductListData: [],
            //下拉框数据
            filterCategory: [],
            //
            order: "desc", //排列顺序，desc表示价格由高到低，asc表示价格由低到高
            sort: "id", //可以是id或price
            categoryId: 0, //类别id，代表下拉菜单中的全部、居家等选项
        };
    },
    created() {
        getHistoryDataAPI().then((res) => {
            console.log(res.data);

            let { historyKeywordList, hotKeywordList, placeholder } = res.data; //结构后 再赋值
            this.placeholder = placeholder;
            this.historyKeywordList = historyKeywordList;
            this.hotKeywordList = hotKeywordList;
        });
    },

    methods: {
        tagClick(val) {
            this.searchVal = val;
            //发送请求
            this.onSearch(val);
        },
        priceChange(value) {
            this.sort = "price";
            this.order = value;
            //发送请求
            this.onSearch(this.searchVal);
        },
        categoryChange(id) {
            this.categoryId = id;
            //发送搜索请求
            this.onSearch(this.searchVal);
        },
        ...mapMutations({
            chanIsShowShadow: "showShadow/chanIsShowShadow",
        }),
        onSearch(value) {
            //切换
            this.blockShow = 3;
            //发起回车后的请求
            getSearchProductsDataAPI({
                keyword: value,
                //细化搜索请求: 价格从高到低 分类选项 发起请求准备
                order: this.order, //通知后端从高到底
                sort: this.sort, //通知后端按照id排序还是price排序
                categoryId: this.categoryId, //分类请求id
            }).then((res) => {
                // console.log(res.data);
                this.searchProductListData = res.data.data;
                let { data, filterCategory } = res.data;
                this.searchProductListData = data;
                // console.log(filterCategory); //这里的filterCategory中的数据并不是我们想要的
                //处理
                let newArr = filterCategory.map((item) => {
                    return {
                        text: item.name,
                        value: item.id,
                        checked: item.checked,
                    };
                });
                this.filterCategory = newArr;
            });

            //回调参数value: string (当前输入的值)
            console.log("执行了搜索", value);
        },
        onCancel() {
            console.log("点击了取消");
            // this.$router.push("/home");//不建议 哪里来回哪里去
            this.$router.go(-1);
            this.chanIsShowShadow(false);
        },
        onInput(value) {
            //切换页面
            this.blockShow = 2;
            //将输入的值作为参数发送请求

            getSearchTipsDataAPI({ keyword: value }).then((res) => {
                if (res.errno == 0) {
                    // console.log(1, res);
                    this.searchTipsListData = res.data;
                }
            });
        },
    },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
    position: fixed;
    top: 0;
    background-color: #efefef;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* 固定定位无法滚动 添加  overflow: scroll;*/
    overflow: scroll;
}
</style>